<template>
	<view class="knowitall">
		<!-- 头部 -->
		<view class="knowitall-header">
			<!-- 内容 -->
			<view class="knowitall-header-box">
				<view>
					<text class="iconfont knowitall-header-box-title" @tap="goHome">&#xe614;</text>
					<text>百事通</text>
				</view>
				<view>
					<image src="../../static/image/contacts/userlogo.jpg" mode="scaleToFill" @tap="openMeView"></image>
				</view>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="knowitall-search">
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="uni-input">{{array[index]}}<text class="iconfont">&#xe60a;</text></view>
			</picker>
			<text class="iconfont">&#xebde;</text>
			<input type="text" :value="search" placeholder="搜索工作/服务"/>
			<text class="knowitall-search-btn">搜索</text>
		</view>
		<!-- 快捷菜单 -->
		<view class="knowitall-menu">
			<view>
				<text class="iconfont">&#xe65d;</text>
				<view>
					需求发布
				</view>
			</view>
			<view>
				<text class="iconfont green">&#xe66b;</text>
				<view>
					我的需求
				</view>
			</view>
			<view>
				<text class="iconfont origin">&#xe7c4;</text>
				<view>
					我的接单
				</view>
			</view>
			<view>
				<text class="iconfont red">&#xe648;</text>
				<view>
					我的关注
				</view>
			</view>
		</view>
		<!-- 需求清单 -->
		<view class="knowitall-masklist">
			<view class="knowitall-masklist-title">
				任务推荐
			</view>
			<view class="knowitall-masklist-box" v-for="i in taskList">
				<view>
					<text>{{i.title}}</text><text>{{i.price}}</text>
				</view>
				<view>
					<text>{{i.place1}} | {{i.place2}} | {{i.place3}}</text><text>{{i.time}}</text>
				</view>
				<view>
					{{i.tips}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				search: '',
				index: 0,
				array: ['全部', '社会帮助', '家电维修', '代跑服务', '虚拟公司'],
				taskList:[
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'预约搬家服务',price:'300元/人',place1:'成都',place2:'锦江区',place3:'YY小区',time:'2020-06-29',tips:"问题描述：下周三(2020-07-01)需要两位大哥帮忙搬家"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"},
					{title:'急需冰箱修理',price:'200元',place1:'成都',place2:'武侯区',place3:'XX小区',time:'2020-06-29',tips:"问题描述：保鲜层制冷有问题，温度和室内温度一样"}				
					]
			}
		},
		methods: {
			/* 返回首页 */
			goHome: function() {
				console.log(1);
				uni.switchTab({
					url: '../index/index'
				})
			},
			/* 打开个人信息界面 */
			openMeView: function() {
				console.log('打开个人信息界面 ')
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../static/fontSize.less");

	/* 主体 */
	.knowitall {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.knowitall-header {
		height: 150rpx;
		position: sticky;
		top: 0;
		background-color: @masterColor;
		z-index: 900;

		/* 内容 */
		.knowitall-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;

			view {
				&:first-child {
					width: 564rpx;
					font-size: @fontBigger;

					/* 标题 */
					.knowitall-header-box-title {
						padding-left: 34rpx;
						font-size: @fontBigger;
					}

					&>text:last-child {
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}

				&:last-child {
					width: 78rpx;
					margin-right: 32rpx;

					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 50%;
					}
				}

				display: flex;
				align-items: center;
			}
			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}

	/* 搜索框 */
	.knowitall-search{
		position: relative;
		display: flex;
		height: 156rpx;
		align-items: center;
		background-color: @colorWrite;
		view{
			width: 135rpx;
			height: 86rpx;
			margin-left: 36rpx;
			text-align: center;
			font-size: @fontSmall;
			line-height: 86rpx;
			color: #9B939B;
			background-color: #F8F8F8;
			border-top-left-radius: 43rpx;
			border-bottom-left-radius: 43rpx;
			text{
				font-size: 15rpx;
			}
		}
		input{
			width: 430rpx;
			height: 86rpx;
			color: #D2D8E0;
			font-size: @fontSmall;
			text-indent: 75rpx;
			line-height: 86rpx;
			border-left: 1rpx solid #EDEDED;
			background-color: #F8F8F8;
		}
		&>.knowitall-search-btn{
			display: block;
			width: 112rpx;
			height: 86rpx;
			color: #60A4FB;
			text-align: center;
			line-height: 86rpx;
			background-color: #E0EFFE;
			border-top-right-radius: 43rpx;
			border-bottom-right-radius: 43rpx;
		}
		&>text.iconfont{
			position: absolute;
			top: 58rpx;
			left: 200rpx;
			font-size: @fontBase;
			color: #D2D8E0;
		}
	}

	/* 快捷菜单 */
	.knowitall-menu{
		display: flex;
		flex-wrap: wrap;
		height: 150rpx;
		background-color: @colorWrite;
		&>view{
			display: flex;
			margin-bottom: 15rpx;
			width: 25%;
			flex-wrap: wrap;
			justify-content: center;
			&>text{
				display: block;
				margin-bottom: 5rpx;
				width: 88rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				font-size: @fontBiggest;
				color: @colorWrite;
				background-color: #3396FC;
				border-radius: 36rpx;
				&.yellow{
					background-color: #FEAC00;
				}
				&.green{
					background-color: #15BC84;
				}
				&.origin{
					background-color: #FF943D;
				}
				&.blue{
					background-color: #4DA9EC;
				}
				&.red{
					background-color: #F25542;
				}
				&.gray{
					color: #747D86;
					background-color: #F3F4F6;
				}
			}
			&>view{
				width: 100%;
				text-align: center;
				font-size: @fontSmall;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}
	}

	/* 需求清单 */
	.knowitall-masklist{
		margin-top: 20rpx;
		height: calc(100vh - 476rpx);
		overflow-y: auto;
		background-color: @colorWrite;
		&>.knowitall-masklist-title{
			height: 96rpx;
			text-indent: 32rpx;
			line-height: 96rpx;
			font-weight: 600;
			border-bottom: 1rpx solid #F0F0F0;
		}
		&>.knowitall-masklist-box{
			margin-left: 32rpx;
			padding: 16rpx 32rpx 16rpx 0;
			color:#6F7372;
			border-bottom: 1rpx solid #F0F0F0;
			/* 标题和价格 */
			&>view:first-child{
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 64rpx;
				font-size: @fontBig;
				font-weight: bold;
				&>text:first-child{	
					color: #282828;
				}
				&>text:last-child{
					color: #FF685A;
				}
			}
			/* 时间地点 */
			&>view:nth-child(2){
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 64rpx;
				&>text:last-child{
					color: #E0D9DB;
					font-size: @fontSmall;
				}
			}
		}
	}
</style>
